{extend name="public/base"/}
{block name="style"}
<link href="__PUBLIC__/ieasy/css/classify.css?v=2.1.49" rel="stylesheet" type="text/css">
<link href="__PUBLIC__/ieasy/css/book_details.css" rel="stylesheet" type="text/css">
<style type="text/css">
	.weui_btn_default:not(.weui_btn_disabled):visited {
    color: #454545;
}
.weui_btn_default {
    background-color: #f7f7f7;
    color: #454545;
}
.weui_btn {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    line-height: 2.33333333;
    border-radius: 5px;
    overflow: hidden;
}
.weui_btn, .weui_dialog_ft a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.weui_actionsheet {
    z-index: 100;
}
.weui_actionsheet_toggle {
    -webkit-transform: translate(0);
    transform: translate(0);
}
.weui_actionsheet {
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    background-color: #efeff4;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}
.weui_actionsheet .weui_actionsheet_title {
    padding: 8px 0;
    text-align: center;
    font-size: 16px;
    color: #999;
    background-color: #f4f4f4;
    position: relative;
}
.weui_actionsheet .weui_actionsheet_title:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
.weui_actionsheet_menu {
    background-color: #fff;
}.weui_actionsheet_cell {
    position: relative;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
}.actionsheet-tip {
    margin-top: -10px;
    text-align: left;
    overflow: hidden;
}.actionsheet-tip li {
    float: left;
    width: 25%;
    padding: 0 6px;
    margin-top: 10px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}.weui_actionsheet_action {
    margin-top: 6px;
    background-color: #fff;
}.weui_actionsheet_cell {
    position: relative;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
}
</style>

{/block}
{block name="body"}
<!--console_main 弹出吐丝-->
<div id="console_main"></div>
<div class="head_tit_box">
	<a href="javascript:;" class="head_return_page_but"></a>
		<div class="head_menu_but_box">
		<a href="javascript:;" class="head_menu_but"></a>
	</div>
		<h1>书籍详情</h1>
</div>
<!--导航-->
{block name="include"}{include file="public:dropnav" /}{/block}
<!-- 这是正文  -->

<div class="body_sytle">
	<div class="bd_head_box">

		<div class="bd_head_info">
			<div class="bd_head_info_img"><img src="{empty name="cover"}/public/novel/images/default.jpg{else /}{$cover}{/empty}" /></div>
			<div class="bd_head_info_txt">
				<h1>{$title}</h1>
				<div class="bd_head_info_other"><strong>等风 </strong></div>
				<div class="bd_head_info_tag">
					<span>{$category_id|get_category=###,'title'}</span>
					<span>{$fullflag==1?"已完结":"连载中"}</span>
				</div>
				<div class="bd_head_info_other"><span>{$size}字</span><em></em><span>{$allvisit}点击</span></div>
			</div>

			<div class="bd_but_box">
				{if $historylog}
					<a href="/chapter/read/{$bookid}/{$historylog.chapterid}" class="buts_1">开始阅读</a>
				{else}
				<a href="/chapter/read/{$bookid}/{$previd}" id="startread" class="buts_1">开始阅读</a>
				{/if}
			</div>

			<div class="bd_description_box bd_description_open">
				<p>{$intro_s}</p>
				<a href="javascript:;">展开</a>
			</div>
			<div class="bd_list_box">
				<div class="bd_list_tit">
					<h2>目录<span>（共29章）</span></h2>
					<div class="bd_list_new"><span></span><i></i>
						<a href="/chapter/read/{$bookid}/{$chapter.id}">最新章节：{$chapter.chaptername}</a>
					</div>
				</div>
			</div>
		</div>

		<ul class="bd_list_ul">
			{volist name="chapterlist" id="vo"}
			<li>
				<a href="/chapter/read/{$bookid}/{$vo.id}">{$vo.chaptername}</a>
			</li>
			{/volist}
		</ul>
		<a href="/book/chapter/{$bookid}" class="bd_list_more">查看更多 >></a>
	</div>
<div class="novel-detail">
	<div class="novel-tip block">
		<div class="mod-tip-list">
			<div class="bubble">
				<span>打赏</span>
				<hr>
				<span class="sum_of_tip">{$sumbonus}</span>
			</div>
			<a class="btn-tip-menu" href="javascript:;">打赏</a>
			<div class="tip-history">
				<h6 class="title">打赏记录</h6>
				<div class="no-data">土豪，求打赏</div>
				<div class="rows"></div>
				<a class="weui_btn weui_btn_default btn-load-more" href="javascript:;">查看更多</a>
			</div>
</div>                   

</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/ieasy/js/zepto.min.js?v=2.1.49"></script>
<script type="text/javascript" src="__PUBLIC__/ieasy/js/zepto.cookie.min.js?v=2.1.49"></script>

<!-- 这是zepto插件 -->

<script type="text/javascript" src="__PUBLIC__/ieasy/js/common.js?v=2.1.49"></script>
<script type="text/javascript" src="__PUBLIC__/ieasy/js/cps_log.js?v=2.1.49"></script>
<script type="text/javascript">
var bookid={$bookid};
var loginurl = "/login?backurl={$backurl}";
$(function(){
	$('.bd_description_box a').click(function(){
		$(this).parent().removeClass('bd_description_open');
	});
});
</script>
<link rel="stylesheet" href="__PUBLIC__/ieasy/css/front.css" />
<link rel="stylesheet" href="__PUBLIC__/ieasy/css/vendor.css" />

<script src="__PUBLIC__/ieasy/js/vendor.js"></script>
<script src="__PUBLIC__/ieasy/js/app.js"></script>
<script type="text/html" id="tmpl-gifts">
  <ul class="actionsheet-tip">
    {{#each gifts}}<li>
      <a class="btn-gift" data-gift-id="{{name}}">
        <img style="display: inline;" src="{{imgfile}}" alt="{{caption}}">
        <span class="text"><span class="price">{{price}}</span>书币</span>
      </a>
    </li>{{/each}}
  </ul>
</script>

<script>
	
  (function (global) {
    var gifts = {$bonusconfig|json_encode};

    global.Tip = function () { };

    _.extend(Tip.prototype, {
      open: function () {
        var me = this;
        $.actions({
          title: '打赏',
          actions: [{
            className: 'bg-white',
            text: HandlebarTemplates.get('tmpl-gifts')({
              gifts: gifts
            })
          }]
        });

        $('.actionsheet-tip').on('click', '.btn-gift', function () {
		 var gift = _.find(gifts, {name: $(this).data('gift-id')});
          setTimeout(function () {
            me.create(gift);
          }, 50);
        });
      },
      create: function (gift) {
        var me = this;
        $.actions({
          title: '确定打赏?',
          actions: [{
            text: '确定',
            className: 'color-primary',
            onClick: function () {
              $.ajax({
                url: '/api/novel/bookbonus',
                type: 'POST',
                dataType: 'JSON',
                contentType: 'application/json',
                data: JSON.stringify({
                  actname: gift.name,
				  acttitle: gift.caption,
				  actvalue: gift.price,
				  imgfile: gift.imgfile,
                  articleid: bookid
				})
              })
              .then(function (payload) {
				 console.log(payload);
                $.toast('打赏成功');

                $(document).trigger('inovel.tip.created', payload.data);
              })
              .fail(function (error) {
                // 余额不足
                if (error.responseJSON.code ==3) {
                  me.recharge(gift);
				}else if(error.responseJSON.code ==2){
					$.toast(error.responseJSON.msg, 'forbidden');
					setTimeout(function () {
						window.location.href=loginurl;
					}, 1000);
                } else {
                  $.toast(error.responseJSON.msg, 'forbidden');
                }
              });   
            }
          }]
        });
      },
      recharge: function (gift) {
        $.modal({
          title: "余额不足",
          text: " 是否前往充值?",
          buttons: [{ 
            text: "立即充值",
            onClick: function () {
              window.onpageshow = function (e) {
                if (e.persisted) {
                  location.reload();
                }
              };

              location.assign('/pay/index');
            }
          }, { 
            text: "取消",
            className: "default"
          }]
        });
      }
    });
  })(window);
</script>
	<script type="text/html" id="tmpl-tip-history">
		<div class="row">
		  <div><img class="avatar" src="{{ headimgurl }}" alt="{{ nickname }}"></div>
		  <div class="detail">
			<p class="nickname">{{ nickname }}</p>
			<div class="gift">赠送: <img style="display: inline;" src="{{ gift_img_url }}" alt="{{ gift_name }}"> × 1 个礼物给作者</div>
			<div class="datetime">{{timestamp created_at 'YYYY-MM-DD HH:mm'}}</div>
		  </div>
		</div>
	</script>
	<script>
		$(function () {
		  var pageSize = 5;

		  function TipHistory() {
			_.extend(this, {
			  page: 0,
			  loading: false,
			  completed: false,
			  items: []
			});
		  }

		  _.extend(TipHistory.prototype, {
			init: function () {
			  this.loadMore();

			  $('.btn-load-more').on('click', function () {
				tiphistory.loadMore();
			  });
			},
			loadMore: function () {
			  var me = this;
			  var data = {
				page: ++me.page
			  };

			  me.loading = true;
			  return $.ajax({
				url: '/api/novel/bookbonus/bookid/'+bookid+'?' + $.param(data),
				type: 'GET',
				dataType: 'JSON',
				contentType: 'application/json'
			  })
			  .then(function (payload) {
				me.completed = _.isEmpty(payload.data) ||  payload.data.length < pageSize;
				me.render(payload.data);
			  })
			  .always(function () {
				me.loading = false;
			  });
			},
			render: function (data, prepend) {
			  this.items = _.union(this.items, data);

			  if (this.completed) {
				$('.btn-load-more').hide();
			  }

			  $('.tip-history .rows')[this.items.length ? 'show' : 'hide']();
			  $('.tip-history .no-data')[this.items.length ? 'hide' : 'show']();

			  var fn = HandlebarTemplates.get('tmpl-tip-history');
			  var html = _.map(data, function (it) {
				it.nickname = it.nickname || '匿名';
				it.headimgurl = it.headimgurl || '';
				return fn(it);
			  });
			  $('.tip-history .rows')[prepend ? 'prepend' : 'append'](html);
			}
		  });

		  $(document).on('inovel.tip.created', function (event, data) {
			
			tiphistory.render([data], true);
		  });

		//522611b93b59e14169d39f083b3dee53

		  var tiphistory = new TipHistory();                          
		  var tip = new Tip();
		  var hash = qs2hash(location.search);
		  if (hash['tip']) {
			tip.open();
		  }

		  $('.btn-tip-menu').on('click', _.bind(tip.open, tip));

		  tiphistory.init();
		});
	  </script> 
{/block}